<!--
 * @Description: main description
 * @Author: zhang zhen
 * @Date: 2023-03-24 15:43:44
 * @LastEditors: zhang zhen
 * @LastEditTime: 2023-03-24 17:45:28
 * @FilePath: /flieView/src/App.vue
-->

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
import axios from "axios";
const columns = ref([
  {
    dataIndex: "fileName",
    title: "文件名称",
    width: 120,
  },
  {
    dataIndex: "size",
    title: "尺寸",
    width: 100,
  },
  {
    dataIndex: "process",
    title: "进度",
    width: 200,
  },
]);
const dataSource = ref([
  {
    fileName: "fileA",
    id: "1",
    size: "12",
    status: 1,
    process: 0,
  },
  {
    fileName: "fileB",
    size: "222",
    id: "2",
    status: 1,
    process: 0,
  },
  {
    fileName: "fileC",
    size: "34",
    id: "3",
    status: 1,
    process: 0,
  },
  {
    fileName: "fileD",
    id: "4",
    size: "233",
    status: 1,
    process: 0,
  },
  {
    fileName: "fileE",
    id: "5",
    size: "233",
    status: 1,
    process: 0,
  },
  {
    fileName: "fileF",
    id: "6",
    size: "233",
    status: 1,
    process: 0,
  },
]);
const newSelectedRowKeys = ref([]);
const newSelectedRows = ref([]);
const requestPool = ref([]);
const handleSelectRow = (selectedRowKeys, selectedRows) => {
  newSelectedRowKeys.value = selectedRowKeys;
  newSelectedRows.value = selectedRows;
};
const handleDownloadFiles = (isFirst = false) => {
  if (!newSelectedRows.value.length)
    return message.warning("请勾选需要下载的项目");
  let noRequestRow = newSelectedRows.value.filter((i) => i.status == 1); // status: 1表示未请求
  if (noRequestRow.length) {
    // 每次往请求池里面写入三个 requestPool
    requestPool.value = requestPool.value.concat(noRequestRow.splice(0, isFirst ? 3 : 1));
    console.log('requestPool', requestPool.value.length)
    if (!requestPool.value.length) return console.log('当前请求池，处理完了。')
    
    requestPool.value.map(i => {
      if (i.status == 2 || i.status == 3) return
      axios.post("/api/downloadFiles", i, {
        // onUploadProgress: (progressEvent) => {
        //   i.process = Number(
        //     ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
        //   );
        // },
      }).then(res => {
        const { success, message, status } = res.data
        console.log(message)
        if (success) {
          requestPool.value = requestPool.value.filter(item => item.id != i.id)// 连接池自动清空
          i.status = status
          handleDownloadFiles() // 触发下
        }
      });
      i.status == 1 && (i.status = 2)
    }) // 等待请求
    // 每次成功之后线程池子里面 减少一个 小于 3个， 当千选中的 - 3  > 0  继续 池子里面放入项目 < 3
  }
};
</script>

<template>
  <a-button
    type="primary"
    style="margin-bottom: 15px"
    @click="handleDownloadFiles(true)"
    >批量下载</a-button
  >
  <a-table
    bordered
    rowKey="id"
    :data-source="dataSource"
    :columns="columns"
    style="width: 600px"
    :pagination="false"
    :row-selection="{
      selectedRowKeys: newSelectedRowKeys,
      onChange: handleSelectRow,
    }"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'process'">
        <a-progress :showInfo="false" :percent="record.status == 1 ? 0 : 100" :status="record.status == 1 ? '' : record.status == 2 ? 'active' : record.status == 3 ? 'success' : 'exception'"/>
        {{record.status == 1 ? '等待下载' : record.status == 2 ? '下载中' : record.status == 3 ? '下载完成' : '下载失败'}}
      </template>
    </template>
  </a-table>
</template>

<style scoped></style>
